<template>
    <div style="background: #fff">
        <van-nav-bar left-arrow @click-left="back()"/>
        <div style="padding-left: 10px">
            <van-tree-select height="calc(100vh - 96px)"
                              :items="groups"
                              @click-nav="member" :main-active-index.sync="active">
                <template #content>
                    <van-list style="padding-bottom: 55px"
                              v-model="loading"
                              :error.sync="error"
                              :immediate-check="false"
                              error-text="请求失败，点击重新加载"
                              :finished="finished"
                              finished-text=""
                              @load="onLoad"
                    >
                        <van-cell-group>
                            <van-cell v-if="!loading" v-for="data in listData" :title="data.username">
                                <template #right-icon>
                                    <van-icon @click="edit(data.id)" size="12" color="#3188E7" style="margin-top: 6px"> 编辑</van-icon>
                                </template>
                            </van-cell>
                            <van-empty v-if="total == 0  && !loading" description="暂无数据" />
                        </van-cell-group>
                    </van-list>
                </template>
            </van-tree-select>
        </div>
        <van-button style="position: fixed;bottom: 55px;right: 10px;width: calc(59vw)" size="small"  @click="create()" round  type="info">+ 新增档案</van-button>
    </div>
</template>

<script>
import {Group,Member} from '@/utils/request';
export default {
    data() {
        return {
            active: 0,
            listData: [],
            params: {page: 1,gid: 0},//分页
            total: 1,//总数据
            error: false,//错误
            loading: false,//加载loading
            finished: false,//数据加载完成
            groups: [],
        }
    },
    activated() {
        this.$store.dispatch('setActive', 4);
        this.group();
    },
    methods: {
        edit(id){
            this.$router.push({name:'MemberUpdate',query:{id:id,gid:this.params.gid}});
        },
        create(){
            this.$router.push({name:'MemberUpdate',query:{gid:this.params.gid}});
        },
        member(index){
            if(this.groups.length){
                this.params.gid = this.groups[index].id;
                this.listData = [];
                this.params.page = 1;
                this.total = 1;
                this.finished = false;
                this.list();
            }
        },
        back() {
            this.$router.go(-1);
        },
        group(){
            this.groups = [];
            Group().then((res)=>{
                if (res.code == 0) {
                    res.data.data.forEach((v)=>{
                        this.groups.push({text: v.name, id: v.id});
                    });
                    if(!this.params.gid){
                        this.active = 0;
                        this.params.gid = this.groups[0].id;
                    }
                    this.list();
                }
            })
        },
        //加载更多
        onLoad() {
            this.list();
        },
        list() {
            this.loading = true;
            Member({params: this.params}).then((res) => {
                if (res.code) {
                    this.loading = false;
                    this.total = 1;
                    this.error = true;
                } else {
                    this.total = res.data.total;
                    this.loading = false;
                    if (res.data.last_page == this.params.page) {
                        this.finished = true;
                    }
                    if (this.params.page == 1) {
                        this.listData = res.data.data;
                    } else {
                        this.listData = this.listData.concat(res.data.data);
                        this.params.page++;//下一页
                    }
                }
            }).catch(() => {
                this.loading = false;
                this.total = 1;
                this.error = true;
            })
        }
    }
}
</script>

<style scoped>
.van-sidebar-item--select::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 16px;
    /*background-color: #111;*/
    background-color: #3188E7;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: '';
}
.van-sidebar-item{
    background-color: #fff;
}
.van-sidebar-item--select, .van-sidebar-item--select:active {
    /*background-color: #f7f8fa;*/
    color: #3188E7;
}
.van-tree-select__nav{
    background-color: #fff;
    border-right: 1px solid #f4f5f7;
}
.van-button--default {
    color: #3188E7;
    background-color: #fff;height: 48px;
    border: 0 solid #ebedf0;
}

</style>
